<template>
  <!-- <div slot="pull-down-ready">ready to refresh</div> -->
  <div class="wrapper">
    <vue-data-loading
      :listens="['infinite-scroll', 'pull-up']"
      :distance="65"
      @pull-up="fetchData"
    >
      <!-- 顶部导航 -->
      <div class="top">
        <div class="dao">
          <div>
            <span
              @click="btn(index)"
              :class="num == index ? 'one' : 'two'"
              v-for="(item, index) in text"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <!-- <span class="t">同城交友</span> -->
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="wal-wrapper">
        <swiper :options="swiperOption" v-show="showSwiper">
          <!-- slides -->
          <swiper-slide
            v-for="(item, index) of walList"
            :key="index"
            class="wal-box"
          >
            <img class="swiper-img" :src="$photo + item.litpic" alt />
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 轮播图 -->
      <!-- 切换按钮 -->
      <div class="box">
        <span
          @click="oBtn(index)"
          :class="subscript == index ? 'one' : 'two'"
          v-for="(item, index) in textOne"
          :key="index"
          >{{ item }}</span
        >
      </div>
      <div class="box" v-show="subscript < 3">
        <span
          @click="oBtnT(index, item)"
          :class="subscriptT == index ? 'one' : 'two'"
          v-for="(item, index) in computedData"
          :key="index"
          >{{ item }}</span
        >
      </div>
      <!-- 主题内容  -->
      <div id="box1" v-show="subscript != 3 && subscript != 2">
        <div>
          <div class="boxs">
            <div class="item" v-for="(item, index) in conversion" :key="index">
              <section>
                <div class="boxp">
                  <img
                    @click="
                      $router.push({
                        path: '/details',
                        query: {
                          backDatac: subscript,
                          backDatacT: subscriptT,
                          sex: sex,
                          uid: item[0]['uid']
                        }
                      })
                    "
                    class="o"
                    v-if="item[0]['pic_id']"
                    :src="
                      item[0]['pic_id']
                        ? $photo + item[0]['pic_id']
                        : sData[0].img
                    "
                    alt
                  />
                  <!-- <div class="gj pw1" v-if="subscript == 2">
                    #陪我手拉手活动#
                  </div> -->
                  <div>
                    <!-- <div class="gj pw2" v-if="subscript == 2">#陪我逛街#</div>
                    <div class="gj pw3" v-if="subscript == 2">#陪我逛街#</div> -->
                    <img
                      class="t"
                      @click="
                        $router.push({
                          path: '/details',
                          query: {
                            backDatac: subscript,
                            backDatacT: subscriptT,
                            sex: sex,
                            uid: item[1]['uid']
                          }
                        })
                      "
                      v-if="item[1]['pic_id']"
                      :src="
                        item[1]['pic_id']
                          ? $photo + item[1]['pic_id']
                          : sData[1].img
                      "
                      alt
                    />
                    <img
                      @click="
                        $router.push({
                          path: '/details',
                          query: {
                            backDatac: subscript,
                            backDatacT: subscriptT,
                            sex: sex,
                            uid: item[2]['uid']
                          }
                        })
                      "
                      class="t"
                      v-if="item[2]['pic_id']"
                      :src="
                        item[2]['pic_id']
                          ? $photo + item[2]['pic_id']
                          : sData[2].img
                      "
                      alt
                    />
                  </div>
                </div>
                <div class="boxb">
                  <!-- <div class="gj pw4" v-if="subscript == 2">#陪我逛街#</div>
                  <div class="gj pw5" v-if="subscript == 2">#陪我逛街#</div> -->
                  <img
                    @click="
                      $router.push({
                        path: '/details',
                        query: {
                          backDatac: subscript,
                          backDatacT: subscriptT,
                          sex: sex,
                          uid: item[3]['uid']
                        }
                      })
                    "
                    v-if="item[3]['pic_id']"
                    :src="
                      item[3]['pic_id']
                        ? $photo + item[3]['pic_id']
                        : sData[3].img
                    "
                    alt
                  />
                  <img
                    @click="
                      $router.push({
                        path: '/details',
                        query: {
                          backDatac: subscript,
                          backDatacT: subscriptT,
                          sex: sex,
                          uid: item[4]['uid']
                        }
                      })
                    "
                    v-if="item[4]['pic_id']"
                    :src="
                      item[4]['pic_id']
                        ? $photo + item[4]['pic_id']
                        : sData[4].img
                    "
                    alt
                  />
                </div>
              </section>
            </div>
            <div class="text" v-show="dataStart">没有更多数据了~</div>
          </div>
        </div>
      </div>
      <!-- 主题内容 任务邀约 -->
      <div class="taskInvite" v-show="subscript == 2">
        <div
          v-for="(item, index) in taskDataXr"
          :key="index"
          class="list"
          @click="
            $router.push({
              path: '/taskDetails',
              query: {
                backDatac: subscript,
                backDatacT: subscriptT,
                id: item.id
              }
            })
          "
        >
          <div class="con_header">Top{{ index + 1 }}</div>
          <div class="con_content">
            <img :src="$photo + item.pic_id" alt srcset />
            <div class="content_left">
              <div>
                {{ item.name }}
                <img
                  :src="item.sex == 1 ? imgUrl.sex_nn : imgUrl.sex_nv"
                  alt
                  srcset
                />
              </div>
              <div>
                <img
                  src="../../../static/images/task/positionds.png"
                  alt
                  srcset
                />
                {{ item.site }}
              </div>
            </div>
            <div class="content_right">
              <div>
                <span>主题：{{ item.title }}</span>
                <div>
                  <img
                    src="../../../static/images/task/numberPer.png"
                    alt
                    srcset
                  />
                  {{ item.demand_people }} 人
                </div>
              </div>
              <div>{{ item.content }}</div>
            </div>
          </div>
        </div>
        <div class="text" v-show="taskStatus">没有更多数据了~</div>
      </div>
      <div id="box2" v-show="subscript == 3">
        <div class="boxs">
          <div
            class="item"
            v-for="(item, index) in sData"
            :key="index"
            @click="
              $router.push({
                path: '/details',
                query: {
                  backDatac: subscript,
                  backDatacT: subscriptT,
                  uid: item['uid']
                }
              })
            "
          >
            <dl>
              <dt>
                <img class="o" :src="$photo + item.pic_id" alt />
                <div class="t">第{{ index + 1 }}</div>
              </dt>
              <dd class="d1">
                <span class="span1" style="color:#343434;">#排行榜</span>
                <span class="span2 overflow-two">{{ item.introduced }}</span>
              </dd>
              <dd class="d2">
                <img class="th" :src="$photo + item.pic_id" alt />
                <span class="span3">{{ item.name }}</span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <!-- 底部导航 -->
      <bottomNavigation :nm="nm"></bottomNavigation>
    </vue-data-loading>
  </div>
</template>

<script>
// import bottomNavigation from '../../components/bottomNavigation.vue'
const bottomNavigation = () => import('../../components/bottomNavigation.vue')
// import VueDataLoading from 'vue-data-loading'
const VueDataLoading = () => import('vue-data-loading')
var preD = function(e) {
  e.preventDefault()
}
export default {
  components: {
    bottomNavigation,
    VueDataLoading
  },
  props: {},
  data() {
    return {
      imgUrl: {
        list1: require('../../../static/images/insert/qian.png'),
        sex_nn: require('../../../static/images/task/nn.png'),
        sex_nv: require('../../../static/images/task/nv.png')
      },
      text: ['全部', '同城'],
      textOne: ['女生', '男生', '任务邀约', '排行榜'],
      textTwo: ['一级女生', '二级女生', '三级女生'],
      textThree: ['一级男生', '二级男生', '三级男生'],
      textTask: ['旅游', '吃饭', '轰趴', '约会', '看电影'],
      num: 0,
      nm: 0,
      bl: 0,
      subscript: 0,
      subscriptT: 0,
      task_money: 200, //任务价格
      conversion: [],
      sData: [
        { img: require('../../../static/images/homePageImg/img0.png') },
        { img: require('../../../static/images/homePageImg/img1.png') },
        { img: require('../../../static/images/homePageImg/img2.png') },
        { img: require('../../../static/images/homePageImg/img3.png') },
        { img: require('../../../static/images/homePageImg/img4.png') },
        { img: require('../../../static/images/homePageImg/img5.png') }
      ],
      // 轮播
      walList: [],
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: true,
        loop: true
      },
      // 弹窗
      showPop: false,
      // 任务邀约数据
      taskInviteData: [],
      // 渲染任务邀约数据
      taskDataXr: null,
      busy: false,
      task_busy: false,
      type: 1,
      sex: 2,
      page: 1,
      pagesize: 3,
      dataStart: false,
      taskStatus: false,
      task_classify: [],
      theme_id: ''
    }
  },
  computed: {
    showSwiper() {
      return this.walList.length
    },
    // 计算数据
    computedData() {
      let data = null
      switch (this.subscript) {
        case 0:
          data = this.textTwo
          break
        case 1:
          data = this.textThree
          break
        case 2:
          data = this.textTask
          break
      }
      //this.subscript!=0?(this.subscript!=1?(data = this.textTask):(data=this.textThree)):(data = this.textTwo)
      return data
    }
  },
  methods: {
    fetchData() {
      if (this.subscript == 0 || this.subscript == 1) {
        if (Math.ceil(this.conversion.length / 3) == this.page) {
          return false
        }
        if (this.page == 1 || this.conversion.length % 3 == 0) {
          this.dataStart = false
          this.getDataHome()
        } else {
          this.dataStart = true
        }
      }
      if (this.subscript == 2) {
        this.taskStatus = false
        this.getTaskData(this.theme_id)
      }
    },
    btn(index) {
      let n = this.num
      n = index
      this.num = n
      this.getDataHome()
    },
    oBtn(index) {
      this.conversion = []
      let n = this.subscript
      n = index
      this.subscript = n
      switch (this.subscript) {
        case 0:
          this.sex = 2
          this.page = 1
          this.getDataHome()
          break
        case 1:
          this.sex = 1
          this.page = 1
          this.getDataHome()
          break
        case 2:
          this.page = 1
          this.theme_id = this.task_classify.find(
            item => item.title == this.textTask[0]
          ).id
          this.getTaskData(this.theme_id)
          break
        case 3:
          this.getHeatList()
          break
        default:
          break
      }
    },
    oBtnT(index, text) {
      this.conversion = []
      let n = this.subscriptT
      n = index
      this.subscriptT = n
      switch (this.subscript) {
        case 2:
          let datart = this.taskInviteData
          let arrty = []
          this.page = 1
          this.theme_id = this.task_classify.find(item => item.title == text).id
          this.getTaskData(this.theme_id)
          break
        case 0:
          switch (this.subscriptT) {
            case 0:
              this.type = 1
              this.page = 1
              this.getDataHome()
              break
            case 1:
              this.type = 2
              this.page = 1
              this.getDataHome()
              break
            case 2:
              this.type = 3
              this.page = 1
              this.getDataHome()
              break
          }
          break
        case 1:
          switch (this.subscriptT) {
            case 0:
              this.type = 1
              this.page = 1
              this.getDataHome()
              break
            case 1:
              this.type = 2
              this.page = 1
              this.getDataHome()
              break
            case 2:
              this.type = 3
              this.page = 1
              this.getDataHome()
              break
          }
          break
      }
    },
    getValue() {
      if (this.$route.query.subs) {
        this.subscript = this.$route.query.subs
        this.subscriptT = this.$route.query.selectSX
        let datart = this.taskInviteData
        let arrty = []
        datart.forEach((item, index) => {
          if (item.task_theme === this.textTask[this.subscriptT]) {
            arrty.push(item)
          }
        })
        this.taskDataXr = arrty
      }
    },
    // sendg(ret) {
    //   this.showPop = ret;
    //   this.popupStatus = !this.popupStatus;
    // },
    /** 获取轮播 */
    getDataCarousel() {
      let _this = this
      this.$axios({
        method: 'POST',
        url: 'Flink/getBanner',
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.walList = res.data.data
          } else {
            alert('轮播请求数据有问题！')
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    /** 男女生数据 */
    getDataHome() {
      this.$axios({
        method: 'POST',
        url: 'Flink/getList',
        data: {
          type: this.type,
          sex: this.sex,
          page: this.page,
          element: this.num
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.dataStart = true
              return false
            } else {
              this.dataStart = false
              if (this.page == 1) {
                this.conversion = []
                this.conversion = JSON.parse(JSON.stringify(res.data.data))
              } else {
                res.data.data.forEach((item, index) => {
                  this.conversion.push(item)
                })
              }
              this.page++
            }
          } else {
            this.conversion = []
            this.dataStart = true
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    /** 任务数据 */
    getTaskData(type) {
      // this.taskDataXr = null
      this.$axios({
        method: 'POST',
        url: '/Needloginaction/Invitation',
        data: {
          theme: type,
          page: this.page,
          token: sessionStorage.token,
          element: this.num
        }
      })
        .then(res => {
          if (this.$route.query.subs) {
            this.page = 1
          }
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.taskStatus = true
              return false
            } else {
              this.taskStatus = false
              if (this.page == 1) {
                this.taskDataXr = res.data.data
              } else {
                res.data.data.forEach((item, index) => {
                  this.taskDataXr.push(item)
                })
              }
              this.page++
            }
          } else {
            this.taskDataXr = []
            this.taskStatus = true
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    /** 排行耪 */
    getHeatList() {
      let _this = this
      this.$axios({
        method: 'POST',
        url: '/Flink/getHeatList',
        data: {
          page: this.page,
          Element: this.num
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.dataStart = !this.dataStart
              return false
            } else {
              this.sData = res.data.data
            }
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
    /*
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
    },*/
    /** 任务支付发布的钱数 */
    /*
    getTaskMoney() {
      let _this = this;
      this.$axios({
        method: "POST",
        url: "/Flink/getTaskMoney"
      })
        .then(res => {
          if (res.data.code == 200) {
            this.task_money = res.data.data;
          } else {
            alert(res.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }*/
  },
  created() {
    if (this.$route.query.subs > 0 || this.$route.query.subs == 0) {
      this.subscript = this.$route.query.subs
      this.subscriptT = this.$route.query.selectSX
      this.sex = parseInt(this.$route.query.sex)
      this.type = parseInt(this.subscriptT + 1)
      if (this.$route.query.subs == 3) {
        this.getHeatList()
      }
    }

    /** 获取任务的类型 */
    this.$axios({
      method: 'POST',
      url: '/Flink/taskType'
    })
      .then(res => {
        if (res.data.code == 200) {
          var arr = []
          res.data.data.forEach((item, index) => {
            arr.push(item.title)
          })
          this.textTask = arr
          this.task_classify = res.data.data

          if (this.$route.query.subs) {
            this.theme_id = this.task_classify.find(
              item => item.title == this.textTask[this.$route.query.selectSX]
            ).id
            this.taskDataXr = null
            this.getTaskData(this.theme_id)
          }
        } else {
          alert(res.data.msg)
        }
      })
      .catch(error => {
        console.log(error)
      })
    this.getDataCarousel()
    this.fetchData()
  },
  mounted() {
    this.getValue()
    // this.getTaskMoney();
  },
  watch: {
    // subscript: {
    //   handler(newVal, oldVal) {
    //     this.type = 0
    //   },
    //   deep: true,
    //   immediate: true
    // }
  }
}
</script>

<style lang="scss" scoped>
.overflow-two {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: normal;
}
.text {
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
// 任务邀约
.taskInvite {
  width: 100%;
  // border-top: 0.013333rem solid #d6d6d6;
  & > .list {
    width: 100%;
    height: 2.32rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    border-bottom: 0.013333rem solid #d6d6d6;
    & > .con_header {
      margin-left: 0.24rem;
      font-size: 0.4rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #030303;
    }
    & > .con_content {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      & > img {
        width: 1.2rem;
        height: 1.2rem;
      }
      & > .content_left {
        width: 3.2rem;
        height: 1.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        & > div:nth-child(1) {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          font-size: 0.44rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #303030;
          & > img {
            width: 0.426667rem;
            height: 0.426667rem;
          }
        }
        & > div:nth-child(2) {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 0.32rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #303030;
          & > img {
            width: 0.28rem;
            height: 0.333333rem;
          }
        }
      }
      & > .content_right {
        border-left: 0.013333rem solid #d6d6d6;
        width: 4.86rem;
        height: 1.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        & > div:nth-child(1) {
          width: 4.52rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          & > span {
            font-size: 0.32rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #303030;
          }
          & > div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 0.24rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #303030;
            & > img {
              margin-right: 0.12rem;
              width: 0.253333rem;
              height: 0.24rem;
            }
          }
        }
        & > div:nth-child(2) {
          width: 4.52rem;
          font-size: 0.24rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #888888;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 省略号在第几行 */
          -webkit-box-orient: vertical;
          line-height: 0.38rem;
        }
      }
    }
  }
}
// 轮播
.wal-wrapper >>> .swiper-pagination-bullet-active {
  background: #fff;
}
.wal-wrapper {
  overflow: hidden;
  width: 100%;
  background: #eee;
  .swiper-img {
    width: 100%;
    height: 4.69rem;
  }
}
/*
.wal-pop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  & > div {
    margin: 0 auto;
    margin-top: 6.3rem;
    width: 7.826667rem;
    height: 5.88rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > div {
      margin-top: 0.55rem;
    }
    & > div:nth-child(1) {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
    & > div:nth-child(2) {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #4E4E4E;
      & > img {
        width: 0.64rem;
        height: 0.773333rem;
      }
    }
    & > div:nth-child(3) {
      width: 80%;
      text-align: center;
      font-size: 0.413333rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
    }
    & > div:nth-child(3) {
      font-size: 0.413333rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
    }
    & > div:nth-child(4) {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > div:nth-child(1) {
        width: 2.76rem;
        height: 1rem;
        border-radius: 0.506667rem;
        border: solid 1px #4E4E4E;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.44rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #303030;
      }
      & > div:nth-child(2) {
        margin-left: 0.533333rem;
        width: 2.76rem;
        height: 1rem;
        background-color: #4E4E4E;
        border-radius: 0.506667rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.44rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #fff;
      }
    }
  }
}
*/
.wrapper {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 1.8rem;

  #box2 {
    .boxs {
      width: 100%;
      height: auto;
      padding: 0 0.6rem;
      box-sizing: border-box;
      margin-bottom: 0.39rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .item {
      margin-bottom: 0.36rem;
      width: 4.16rem;
      height: 5.84rem;
      background-color: #ffffff;
      box-shadow: 0rem 0.01rem 0.27rem 0.05rem rgba(8, 8, 8, 0.11);
      border-radius: 0.27rem;
      border: solid 0rem #f9f8f8;

      .d2 {
        margin-top: 0.27rem;
        padding: 0 0.67rem 0 0.27rem;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .span3 {
          margin-left: 0.2rem;
          font-family: 'PingFangSC-Medium';
          font-size: 0.28rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.44rem;
          letter-spacing: 0rem;
          color: #888888;
        }

        .th {
          width: 0.76rem;
          height: 0.75rem;
          border-radius: 50%;
        }
      }

      .d1 {
        padding: 0 0.67rem 0 0.27rem;
        box-sizing: border-box;
        .span1 {
          font-family: 'PingFang-SC-Regular';
          font-size: 0.37rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.52rem;
          letter-spacing: 0rem;
          color: #f5b927;
        }

        .span2 {
          font-family: 'PingFang-SC-Regular';
          font-size: 0.37rem;
          font-weight: normal;
          letter-spacing: 0rem;
          color: #303030;
        }
      }

      dt {
        position: relative;
        .o {
          width: 4.17rem;
          height: 3.57rem;
          box-shadow: 0rem 0.01rem 0.27rem 0.05rem rgba(8, 8, 8, 0.11);
        }

        .t {
          background-image: url('../../../static/images/homePageImg/bg0.png');
          background-size: 100% 100%;
          position: absolute;
          right: 0%;
          top: 10%;
          width: 1.53rem;
          height: 0.52rem;
          box-shadow: 0rem 0.03rem 0.01rem 0rem rgba(0, 0, 0, 0.25);
          padding-left: 0.57rem;
          box-sizing: border-box;

          font-family: 'PingFangSC-Medium';
          font-size: 0.39rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #ffffff;
        }
      }
    }
  }

  #box1 {
    .boxs {
      width: 100%;
      height: auto;
      padding: 0 0.35rem;
      box-sizing: border-box;
      margin-bottom: 0.39rem;

      .item {
        width: 100%;
        margin-bottom: 0.39rem;

        .gj {
          height: 0.77rem !important;
          padding: 0.2rem 0.19rem;
          box-sizing: border-box;
          background-color: rgba($color: #000000, $alpha: 0.34);
          font-family: 'PingFang-SC-Medium';
          font-size: 0.39rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #ffffff;
        }

        .boxb {
          margin-top: 0.19rem;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          .pw4 {
            position: absolute;
            bottom: 10%;
            left: 0%;
          }

          .pw5 {
            position: absolute;
            bottom: 10%;
            left: 51.5%;
          }

          img {
            width: 4.52rem;
            height: 4.52rem;
          }
        }

        .boxp {
          width: 100%;
          height: 6rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          .pw1 {
            position: absolute;
            bottom: 10%;
            left: 0%;
          }

          .o {
            width: 6rem;
            height: 6rem;
            box-shadow: 0rem 0.01rem 0.27rem 0.05rem rgba(8, 8, 8, 0.04);
            border-radius: 0.11rem;
          }
          div {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;

            .t {
              width: 2.95rem;
              height: 2.95rem;
              box-shadow: 0rem 0.01rem 0.27rem 0.05rem rgba(8, 8, 8, 0.04);
              border-radius: 0.11rem;
            }

            .pw2 {
              position: absolute;
              top: 32%;
              left: 2%;
            }

            .pw3 {
              position: absolute;
              bottom: 5%;
              left: 0%;
            }
          }
        }
      }
    }
  }

  .box {
    width: 100%;
    height: 0.74rem;
    padding: 0 0.56rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0.35rem auto 0.39rem;

    span {
      font-family: 'PingFang-SC-Regular';
      font-size: 0.37rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      padding: 0.2rem 0.27rem;
      margin-right: 0.29rem;
      box-sizing: border-box;
      border-radius: 0.11rem;
    }

    .one {
      border: 0.02rem solid #4e4e4e;
      background-color: #4e4e4e;
      color: #fff;
    }

    .two {
      border: 0.02rem solid #ccc;
      background-color: #fff;
      color: #303030;
    }
  }

  .top {
    width: 100%;
    height: 1.8rem;
    border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.48);
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.45rem;
    box-sizing: border-box;

    .dao {
      width: 100%;
      padding: 0 0.35rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      div {
        span {
          margin-right: 0.45rem;
        }

        .one {
          font-family: 'PingFang-SC-Medium';
          font-size: 0.52rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #000000;
        }

        .two {
          font-family: 'PingFang-SC-Regular';
          font-size: 0.37rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #888888;
        }
      }
      .t {
        font-family: 'PingFang-SC-Regular';
        font-size: 0.37rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #4e4e4e;
      }
    }
  }
}
</style>
